<template>
    <div>
        <div class="item">
            <div class="title">{{ getByRole(0) }}：</div>
            <div class="box">
                <div class="content">{{ getByRole(1) }}</div>
                <i class="el-icon-edit content" @click="edit(0)" />
            </div>
        </div>
        <div class="item">
            <div class="title">账号：</div>
            <div class="box">
                <div class="content">{{ userInfo.account }}</div>
                <i class="el-icon-edit content" @click="edit(1)" />
            </div>
        </div>
        <div class="item">
            <div class="title">头像：</div>
            <div class="box">
                <img :src="getAvatar" class="avatar">
                <i class="el-icon-edit content" @click="edit(2)" />
            </div>
        </div>
        <template v-if="userInfo.role">
            <div class="item">
                <div class="title">性别：</div>
                <div class="box content">{{ userInfo.gender ? '男' : '女' }}</div>
            </div>
            <div class="item">
                <div class="title">职工号：</div>
                <div class="box content">{{ userInfo.jobnum }}</div>
            </div>
            <div class="item">
                <div class="title">职务：</div>
                <div class="box content">{{ userInfo.station_name }}</div>
            </div>
            <div class="item" style="border: none;">
                <div class="title">简介：</div>
                <div class="box content">{{ userInfo.introduce }}</div>
            </div>
        </template>
        <div class="item" style="border: none;">
            <el-button type="primary" @click="showPassword = true">重置密码</el-button>
            <el-button type="danger" @click="signOut">退出登录</el-button>
        </div>
        <el-dialog title="请上传头像" :visible.sync="showAvatar" width="30%">
            <UpPicture v-model="url" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAvatar = false">取 消</el-button>
                <el-button type="primary" @click="edit(3)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="重置密码" :visible.sync="showPassword" width="30%">
            <el-form ref="form" :model="form" :rules="rules" class="form" label-width="80px">
                <el-form-item label="原密码" prop="oldPass">
                    <el-input type="password" v-model="form.oldPass" maxlength="16" show-password />
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                    <el-input type="password" v-model="form.newPass" maxlength="16" show-password  />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">立即提交</el-button>
                    <el-button @click="$refs.form.resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import tool from "ut/tool";
import { mapState, mapActions } from 'vuex';
import UpPicture from "co/UpPicture";
export default {
    name: 'WebUser',
    components: { UpPicture },
    data() {
        return {
            showAvatar: false,
            showPassword: false,
            url: '',
            form: {
                oldPass: '',    // 旧密码
                newPass: '',    // 新密码
                id: this.$cookies.get('userInfo').id,
                role: this.$cookies.get('userInfo').role,
            },
            rules: {
                oldPass: { required: true, message: '请输入原密码' },
                newPass: { required: true, message: '请输入新密码' },
            }
        };
    },
    computed: {
        ...mapState('User', ['userInfo']),
        getByRole() {
            return (index) => {
                let { role, name, nickname } = this.userInfo;
                switch (index) {
                    case 0: return role ? '姓名' : '用户名';
                    case 1: return role ? name : nickname;
                }
            }
        },
        getAvatar() {
            return this.userInfo.avatar || require('asim/avatar_null.png');
        },
    },
    methods: {
        ...mapActions('User', ['getUserInfo','editName', 'editAccount','editAvatar','resetPassword']),
        edit(index) {
            switch (index) {
                case 0: tool.prompt('提示', '请输入用户名', this.getByRole(1)).then((res) => {
                    this.editName(res);
                }); break;
                case 1: tool.prompt('提示', '请输入手机号', this.userInfo.account, /^[1][3,4,5,7,8,9][0-9]{9}$/, '手机号格式有误').then((res) => {
                    this.editAccount(res);
                }); break;
                case 2: this.showAvatar = true; break;
                case 3:
                    this.showAvatar = false;
                    this.editAvatar(this.url);
                    break
            }
        },
        submit() {
            this.$refs.form.validate((valid) => {
				if (valid) {
                    this.showPassword = false;
                    this.resetPassword(this.form);
				}
			})
        },
        signOut(){
            this.$confirm('确定退出系统？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$cookies.remove('userInfo');
                this.$router.replace('/login');
                tool.notif('success','成功', '退出成功');
            });
        }
    },
    mounted() {
        let { role,id } = this.$cookies.get('userInfo');
        this.getUserInfo({ role,id });
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";
.item {
    .w(400px);
    .min_h(50px);
    .font(16px);
    .df;
    .f_ai;
    .bor_b(.5px, solid, #EDEDED);
    .padd(20px, 0);
    .title {
        .w(80px);
        .mar_r(18px);
        .tar;
        .c(#5C5C5C);
    }
    .content {
        .c(#929292);
    }
    .box {
        .w(262px);
        .df;
        .f_jc(space-between);
        .f_ai;
    }
    .avatar {
        .padd(10px);
        .size(60px);
        .bor_r(60px);
        .bg(#F8F8F8);
    }
}
</style>